<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div class="row">
    <div class="col-xs-12 col-sm-7 col-md-7 col-lg-4">
        <h1 class="page-title txt-color-blueDark">
            <i class="fa fa-table fa-fw "></i>
            节点列表
            <span>>
				客户端信息
			</span>
        </h1>
    </div>
    <div class="col-xs-12 col-sm-5 col-md-5 col-lg-8">
        <ul id="sparks" class="">
            <li class="sparks-info">
                <h5> My Income <span class="txt-color-blue">$47,171</span></h5>
                <div class="sparkline txt-color-blue hidden-mobile hidden-md hidden-sm">
                    1300, 1877, 2500, 2577, 2000, 2100, 3000, 2700, 3631, 2471, 2700, 3631, 2471
                </div>
            </li>
            <li class="sparks-info">
                <h5> Site Traffic <span class="txt-color-purple"><i class="fa fa-arrow-circle-up"
                                                                    data-rel="bootstrap-tooltip" title="Increased"></i>&nbsp;45%</span>
                </h5>
                <div class="sparkline txt-color-purple hidden-mobile hidden-md hidden-sm">
                    110,150,300,130,400,240,220,310,220,300, 270, 210
                </div>
            </li>
            <li class="sparks-info">
                <h5> Site Orders <span class="txt-color-greenDark"><i class="fa fa-shopping-cart"></i>&nbsp;2447</span>
                </h5>
                <div class="sparkline txt-color-greenDark hidden-mobile hidden-md hidden-sm">
                    110,150,300,130,400,240,220,310,220,300, 270, 210
                </div>
            </li>
        </ul>
    </div>
</div>

<section id="widget-grid" class="">
    <div class="row">
        <article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <div class="jarviswidget jarviswidget-color-blueDark" id="wid-id-0" data-widget-editbutton="false">
                <header>
                    <span class="widget-icon"> <i class="fa fa-table"></i> </span>
                    <h2>${address}</h2>
                </header>

                <!-- widget div-->
                <div>

                    <!-- widget edit box -->
                    <div class="jarviswidget-editbox">
                        <!-- This area used as dropdown edit box -->

                    </div>
                    <!-- end widget edit box -->

                    <!-- widget content -->
                    <div class="widget-body no-padding">
                        <table class="table table-bordered" id="services">
                            <thead>
                            <tr>
                                <th class="smart-form">
                                    <label class="checkbox" style="margin-bottom: 3px">
                                        <input type="checkbox" id="checkAll"><i></i>
                                    </label>
                                </th>
                                <th>服务</th>
                                <th>版本</th>
                                <th>分组</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <c:forEach items="${cs}" var="consumer">
                                <tr>
                                    <td class="smart-form">
                                        <label class="checkbox">
                                            <input type="checkbox" vv="${consumer.service}"
                                                   jport="${consumer.jmxPort}"/><i></i>
                                        </label>
                                    </td>
                                    <td>${consumer.service}</td>
                                    <td>${consumer.version}</td>
                                    <td>${consumer.group}</td>
                                    <td>
                                        <a onclick="updateConfig(this,'ajax/updateConfig?service=${consumer.service}&version=${consumer.version}&group=${consumer.group}&jport=${consumer.jmxPort}&address=${address}:${consumer.jmxPort}','soa/updateClientConfig')"
                                           class="btn btn-success btn-xs"
                                           data-toggle="modal">更新客户端</a>
                                    </td>
                                </tr>
                            </c:forEach>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="jarviswidget jarviswidget-color-blueDark" id="wid-id-1" data-widget-editbutton="false">
                <header>
                    <span class="widget-icon"> <i class="fa fa-table"></i> </span>
                    <h2>连接池状况</h2>
                </header>

                <!-- widget div-->
                <div>

                    <!-- widget edit box -->
                    <div class="jarviswidget-editbox">
                        <!-- This area used as dropdown edit box -->

                    </div>
                    <!-- end widget edit box -->

                    <!-- widget content -->
                    <div class="widget-body no-padding">
                        <table class="table table-bordered" id="pools">
                            <thead>
                            <tr>
                                <th>目标地址</th>
                                <th>连接池标识</th>
                                <th>最大连接数</th>
                                <th>当前工作数</th>
                            </tr>
                            </thead>
                            <tbody>
                            <c:forEach items="${pools}" var="pool">
                                <tr>
                                    <td width="30%">${pool.address}</td>
                                    <td>${pool.key}</td>
                                    <td>${pool.max}</td>
                                    <td>${pool.current}</td>
                                </tr>
                            </c:forEach>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </article>
    </div>
</section>
<a class="btn btn-primary" href="javascript:void(0);" onclick="refreshLocation('/ajax/client-nodes')">返回</a>
<div class="modal fade" id="remoteModal" tabindex="-1" role="dialog" aria-labelledby="remoteModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
        </div>
    </div>
</div>
<script type="text/javascript">
    pageSetUp();
    var pagefunction = function () {
        $("#services").dataTable({
            dom: "<'dt-toolbar'<'col-xs-12 col-sm-6'fB><'col-sm-6 col-xs-12 hidden-xs'l>r>" +
            "t" +
            "<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>",
            "oLanguage": {
                "sSearch": '<span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>'
            },
            buttons: [
                {
                    text: '更新配置',
                    className: 'btn btn-primary',
                    action: function (e, dt, node, config) {
                        var clients = new Array();
                        var jport;
                        var address = "${address}";
                        $(":checkbox:checked[vv]").each(function () {
                            clients.push($(this).attr("vv"));
                            jport = $(this).attr("jport");
                        });
                        if (clients.length == 0) {
                            alert("please select service first.");
                            return;
                        }
                        updateConfig($("#services_filter .btn-primary"), "ajax/updateConfig?jport=" + jport + "&address=" + address, "soa/updateClientConfig", {"services": clients.toString()})
                    }
                },
            ],
            "iDisplayLength": 10,
            "aLengthMenu": [10, 20, 30, 50],
            "drawCallback": function (oSettings) {
                $("thead").find('th').eq(0).removeClass("sorting_asc");
                $("#services_filter").width("32%");
            },
            columnDefs: [
                {
                    targets: 0,
                    orderable: false,
                    width: "3%"
                },
                {"width": "50%", "targets": 1},
                {"width": "10%", "targets": 2},
                {"width": "10%", "targets": 3},
            ]
        });
        $("#checkAll").click(function () {
            if ($("#checkAll").is(":checked")) {
                $(":checkbox").not("#checkAll").prop("checked", "checked");
            } else {
                $(":checkbox").not("#checkAll").prop("checked", "");
            }
        });
        $('#dt_basic').on('page.dt', function () {
            $(":checkbox").prop("checked", "");
        });
    }
    loadScript("/static/js/plugin/datatables/jquery.dataTables.min.js", function () {
        loadScript("/static/js/plugin/datatables/dataTables.bootstrap.min.js", function () {
            loadScript("/static/js/plugin/datatables/dataTables.buttons.min.js", function () {
                loadScript("/static/js/plugin/datatables/buttons.bootstrap.min.js", function () {
                    loadScript("/static/js/plugin/datatable-responsive/datatables.responsive.min.js", pagefunction)
                });
            });
        });
    });
</script>
